import React from 'react';
import '../../static/setting/index.styl'
import {
  Button, message, Row,
  Col,
} from 'antd';
import axios from 'axios'
import SysWarnopen from './sysWarnopen'


export default class SysWarn extends React.Component {
  state = {
    visible: false,
    text: '开启预警',
    alertList: {},
    isSet: false,
    isUpdate: false,
    loaded: false
  }
  switchWarn = () => {
    this.setState({
      visible: !this.state.visible,
      text: this.state.text === '开启预警' ? '关闭预警' : '开启预警'
    })
  }

  queryAlert = async () => {
    this.setState({
      loaded: false
    })
    let res = await
      axios.get('vrv-monitor-platform-web/alert/set/query')
    if (res.data.statusCode === 200) {
      this.setState({
        alertList: res.data.data,
        isSet: true
      })
    } else {
      message.error(res.data.message)
    }
  }

  showAlert = () => {
    this.setState({isSet: false, isUpdate: true})
  }

  hideAlert = () => {
    this.setState({isSet: true, isUpdate: false})
  }

  webSiteTypeFormat = (item) => {
    item = item.split(',')
    let arr = []
    let data = [{label: '微博', value: 1},
      {label: '论坛', value: 2},
      {label: '新闻', value: 3},
      {label: '博客', value: 4},
      {label: '微信', value: 5}];
    for (let i = 0; i < data.length; i++) {
      for (let j = 0; j < item.length; j++) {
        if (data[i].value == item[j]) {
          arr.push(data[i].label)
        }
      }
    }
    return arr.join(', ')
  }
  ponFormat = (item) => {
    let data = [{label: '正面', value: '1'},
      {label: '全部', value: '-1'},
      {label: '中性', value: '0'},
      {label: '负面', value: '2'}];

    let strJson = data.filter(($data) => {
      return $data.value === item
    })
    return strJson[0].label;
  }

  freFormat = (item) => {
    let str;
    if (item === '0') {
      str = '5分钟'
    } else if (item === '1') {
      str = '10分钟'
    } else if (item === '2') {
      str = '30分钟'
    } else if (item === '3') {
      str = '1小时'
    } else if (item === '4') {
      str = '6小时'
    } else if (item === '5') {
      str = '一天'
    }
    return str
  }


  componentDidMount() {
    this.queryAlert()
  }

  render() {
    return (
      <div className="sysWarn">
        <div className="sysWarn-close">
          <div>
            <Button type={this.state.visible ? '' : 'primary'} onClick={this.switchWarn}>{this.state.text}</Button>
          </div>
          <div className="desc">
            关键词预警：与您设置的关键词相关的舆情，将呈现在“实时舆情－预警舆情”模块，同时您可以选择邮件、 短信、APP端接受通知。
          </div>
        </div>
        {
          this.state.visible ? <div className="sysWarn-open">
            {
              this.state.isSet ? <div className="warnResult">
                <div className="head-title">预警条件</div>
                <div>
                  <Row>
                    <Col span={1}>关键词 : </Col>
                    <Col span={15}>{this.state.alertList.monitorKeyword}</Col>
                  </Row>
                  <Row>
                    <Col span={1}>舆情属性 : </Col>
                    <Col span={15}>{this.ponFormat(this.state.alertList.positiveOrNegative)}</Col>
                  </Row>
                  <Row>
                    <Col span={1}>媒体类型 : </Col>
                    <Col span={15}>{this.webSiteTypeFormat(this.state.alertList.webSiteType)}</Col>
                  </Row>
                </div>
                <div className="head-title">预警通知</div>
                <div>
                  <Row>
                    <Col span={1}>邮件预警 : </Col>
                    <Col span={15}>{this.state.alertList.alertEmail}</Col>
                  </Row>
                  <Row>
                    <Col span={1}>短信预警 : </Col>
                    <Col span={15}>{this.state.alertList.smsSwitch === '1' ? '开启' : '关闭'}</Col>
                  </Row>
                  <Row>
                    <Col span={1}>APP预警 : </Col>
                    <Col span={15}>{this.state.alertList.distKeyword === '1' ? '开启' : '关闭'}</Col>
                  </Row>
                  <Row>
                    <Col span={1}>Web预警 : </Col>
                    <Col span={15}>{this.state.alertList.alertSwitch === '1' ? '开启' : '关闭'}</Col>
                  </Row>
                </div>
                <div className="head-title">短信\邮件预警时间设置<span
                  style={{color: '#9ba2ab', fontSize: '14px', marginLeft: '10px'}}>(APP预警请进入APP设置)</span></div>
                <div>
                  <Row>
                    <Col span={1}>预警时间 : </Col>
                    <Col span={15}>{this.state.alertList.monitorStartTime}<span
                      style={{margin: '0 5px'}}>To</span>{this.state.alertList.monitorEndTime}</Col>
                  </Row>
                  <Row>
                    <Col span={1}>周末预警 : </Col>
                    <Col span={15}>{this.state.alertList.weekSwitch === '1' ? '开启' : '关闭'}</Col>
                  </Row>
                  <Row>
                    <Col span={1}>预警频次 : </Col>
                    <Col span={15}>{this.freFormat(this.state.alertList.frequency)}</Col>
                  </Row>
                  <Row style={{marginTop: '30px'}}>
                    <Col span={1}><Button type="primary" onClick={() => {
                      this.showAlert()
                    }}>修改预警</Button></Col>
                  </Row>
                </div>
              </div> : ''
            }
            {
              !this.state.isSet && this.state.isUpdate ?
                <SysWarnopen data={this.state.alertList} hide={this.hideAlert} query={this.queryAlert}/> : ''
            }
          </div> : ''
        }
      </div>
    );
  }
}